import { Icon } from "@iconify/react"
import { MenuProps } from "antd"
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
import { useLocation } from "react-router"

import { useLocale } from "@/locales"
import { MenuData, MenuDataItem } from "@/routes/type"
import { getItem } from "@/utils"

import TooltipText from "../../tooltipText"
import { GlobalMenuOption, MenuInfo, MenuItem } from "../types"

export const useGlobalSider = (setCollapsed: (collapsed: boolean) => void, menuData: MenuData, locale: "zh_CN" | "en_US") => {
	const { routeFormat } = useLocale()

	// Add fake actions
	const [currentSideMenus, setCurrentSideMenus] = useState<MenuItem[]>([])
	const [selectedKeys, setSelectedKeys] = useState<string[]>([])
	const [openKeys, setOpenKeys] = useState<string[]>([])
	const location = useLocation()
	const mappingMenus = useRef<{ [key: string]: MenuDataItem }>({})
	const getMenuChildren = useCallback(
		(menuChildrenItem: MenuDataItem[] | null | undefined): MenuItem[] => {
			return (menuChildrenItem || []).map((menuDataItem: MenuDataItem) => {
				if (menuDataItem.component) {
					mappingMenus.current[menuDataItem["component"]] = menuDataItem
					mappingMenus.current[menuDataItem.path] = menuDataItem
				}
				return getItem(
					<TooltipText text={routeFormat({ id: menuDataItem.permissionName }) as string} />,
					menuDataItem.path,
					<Icon icon={menuDataItem.icon} />,
					menuDataItem.children ? getMenuChildren(menuDataItem.children) : undefined
				)
			})
		},
		[routeFormat]
	)
	const getRouterFromKey = (key: string): MenuDataItem => {
		return mappingMenus.current[key]
	}

	const routeMenus: MenuItem[] = useMemo(() => {
		const menus = getMenuChildren(menuData)
		return menus
	}, [menuData, locale])

	useEffect(() => {
		if (!mappingMenus.current[location.pathname]?.path) {
			setOpenKeys([])
			setSelectedKeys([])
			return
		}
		const activeKeys: string[] = (mappingMenus.current[location.pathname]?.path || "").split("/")
		const activePath = [
			`/${activeKeys[1]}`,
			`/${activeKeys[1]}/${activeKeys[2]}`,
			`/${activeKeys[1]}/${activeKeys[2]}/${activeKeys[3]}`
		]
		setOpenKeys(activePath)
		setSelectedKeys(activePath)
		// set current
		const findChildren: GlobalMenuOption = routeMenus.find(
			(menuDataItem: MenuItem) => menuDataItem?.key === `/${activeKeys[1]}`
		) as GlobalMenuOption

		setCurrentSideMenus((findChildren?.children as MenuItem[]) || [])
	}, [location, routeMenus])

	const handleShowVerticalSider = useCallback(
		(info: MenuInfo) => {
			const findChildren: GlobalMenuOption = routeMenus.find(
				(menuDataItem: MenuItem) => menuDataItem?.key === info.key
			) as GlobalMenuOption

			setCurrentSideMenus((findChildren?.children as MenuItem[]) || [])
			setCollapsed(false)
		},
		[routeMenus]
	)

	const handleOpenChange: MenuProps["onOpenChange"] = openKeys => {
		setOpenKeys(openKeys)
	}

	return {
		currentSideMenus,
		selectedKeys,
		openKeys,
		routeMenus,
		handleShowVerticalSider,
		handleOpenChange,
		getRouterFromKey
	}
}
